<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>原生js放大镜</title>
	</head>
	<style type="text/css">
		html, body {
			padding: 0;
			margin: 0;
		}
		.can-box {
			position: relative;
			margin-top: 200px;
		}
		.tip {
			width: 1000px;height: 200px;display:flex;justify-content: center;align-items: center;font-size: 16px;text-align: center;
			position: absolute;top: 0;left: 0;background-color: #ccc;
		}
	</style>
	
	<script type="text/javascript">
		function onImageLoad() {
			var set_button=document.getElementById('set-button');
			var fdfw_inp=document.getElementById('fdfw-inp');
			var fdbs_inp=document.getElementById('fdbs-inp');
			var testdiv=document.getElementById('testdiv');
			var tip=document.getElementById('tip');
			var img=document.getElementById("pic");
			var pic_width = img.offsetWidth;
			var pic_height = img.offsetHeight;
			
			var canvas=document.getElementById('pic-can');
			canvas.width = pic_width;
			canvas.height = pic_height;
			var ctx=canvas.getContext('2d');
			ctx.drawImage(img, 0, 0);
			var imgdata = ctx.getImageData(0,0,pic_width,pic_height);
			var pic_data = imgdata.data;
			
			var canvas1=document.getElementById('pic-can1');
			var ctx1=canvas1.getContext('2d');

			var scal = 0;
			var bs = 0;
			
			set_button.onclick = function() {
				ctx1.clearRect(0,0,pic_width,pic_height)
				var fdfw = fdfw_inp.value*1;
				var fdbs = fdbs_inp.value*1;
				if(fdfw%2==0) {
					fdfw++;
				}
				scal = fdfw;
				bs = fdbs;
				
				canvas1.width = pic_width*bs/2;
				canvas1.height = pic_height*bs/2;
			}
			set_button.onclick();
			
			canvas.onmousemove = function(event) {
				//取当前坐标
				var x = event.pageX - canvas.getBoundingClientRect().left;
				var y = event.pageY - canvas.getBoundingClientRect().top;
				var index = ((y-1)*pic_width + x) * 4;
				var color = 'rgba('+pic_data[index] + ',' + pic_data[index+1] + ',' + pic_data[index+2] + ',' +pic_data[index+3]+')'
				tip.style.backgroundColor = color;
				var temp_html = '<div><span>'+ '当前像素点坐标：X:' + x + ',Y:' + y +'</span><span>'+ '当前像素值' + color +'</span></div>'	
				testdiv.innerHTML =  temp_html;
				
				//放大镜
				var half_scal = (scal-1)/2;
				var tempImgData = ctx1.createImageData(scal*bs, scal*bs);
				var start_index = index - ((pic_width+1)*half_scal)*4;
				var temp_arr = [];
				for(var a = 0; a < scal ; a++) {
					for(var s = 0; s < bs ; s++) {
						for(var j = 0; j < scal ; j++) {
							for(var z = 0; z < bs ; z++) {
								for(var b = 0; b < 4 ; b++) {
									temp_arr.push(pic_data[start_index + b + 4*j + a*pic_width*4]);
								}
							}
						}
					}
				}
				for(var i = 0; i < tempImgData.data.length; i++) {
					tempImgData.data[i] = temp_arr[i];
				}
				ctx1.putImageData(tempImgData, 0,0);
				
				ctx1.beginPath();
				ctx1.moveTo(0, (half_scal+1)*bs);
				ctx1.lineTo(scal*bs, (half_scal+1)*bs);
				ctx1.moveTo((half_scal+1)*bs, 0);
				ctx1.lineTo((half_scal+1)*bs, scal*bs);
				ctx1.strokeStyle = 'red';
				ctx1.lineWidth = 1;
				ctx1.stroke();
				ctx1.closePath();
				
				canvas1.style.position = 'absolute';
				canvas1.style.top = y + 20 + 'px';
				canvas1.style.left = x + 20 + 'px';
				canvas1.style.zIndex = 1000;
			};
		}
	</script>
	
	<body>
		<div class="can-box">
			<canvas id="pic-can"></canvas>
			<canvas id="pic-can1"></canvas>
		</div>
		<img style="position: fixed;top: 9999999px;" id="pic" src="./test.jpg" onload="onImageLoad()">
		<div class="tip" id="tip">
			<div class="ctrl-btn">
				<h1>原生js放大镜</h1>
				<div>
					<label>放大范围</label>
					<input type="text" value="30" id="fdfw-inp"/>
				</div>
				<div>
					<label>放大倍数</label>
					<input type="text" value="10" id="fdbs-inp"/>
				</div>
				
				<button type="button" id="set-button">设置参数</button>
				<div id="testdiv"></div>
			</div>
		</div>
	</body>
</html>
